import axios from 'axios'
import { useUserStore } from '@/stores'
import { Toast } from 'vant'
import router from '@/router'
// import type { User } from '@/types/user'
// 1. 创建一个axios实例 进行基础配置

const baseURL = 'https://consult-api.itheima.net/'

const instance = axios.create({
  baseURL,
  timeout: 10000
})

// 2. 请求拦截器, 携带token
instance.interceptors.request.use(
  (config) => {
    // 判断是否有token  有的话需要拼接一下
    const store = useUserStore()
    if (store.user?.token && config.headers) {
      // 注意 Bearer后面有一个空格
      config.headers['Authorization'] = `Bearer ${store.user?.token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 3.响应拦截器 (1) 剥离无效数据 (2) 401的拦截

instance.interceptors.response.use(
  (res) => {
    // 后台约定,相映成功,但是code不为10000,是业务逻辑失败
    if (res.data.code !== 10000) {
      Toast(res.data.message)
      return Promise.reject(res.data)
    }
    // 业务逻辑成功了 只返回data不需要其他字段
    return res.data
  },
  (err) => {
    // 请求报错, 响应出错
    // 遇见401跳转登录
    // 1. 现在在 /user/patient 页面下，发起一个获取用户信息的请求，但是此时token失效
    // 2. 跳转登录页面，登录成功之后，需要跳转回 /user/patient 页面 （默认跳转 /user 首页）
    // vue2  $router 路由实例，提供路由相关函数操作  $route  路由相关信息，query params path 。。。
    if (err.response.status === 401) {
      // 删除个人用户信息
      const store = useUserStore()
      store.delUser()
      // 跳转到登录页, 带上失效的页面,登录成功之后,回跳用
      // /user/patient?id=1000
      // path  /user/patient  不带查询参数
      // fullPath  /user/patient?id=1000  完整路径
      // currentRoute 是一个 ref 创建的数据，需要.value
      router.push(`/login?returnUrl=${router.currentRoute.value.fullPath}`)
    }
    return Promise.reject(err)
  }
)

// get请求 和post请求 参数  (params: {})   (data: {})
// 4. 请求工具函数
// (1) 参数  url   method   submitData
// (2) 返回: instance调用接口的request方法 (这样可以通过.then() 或.catch )
type Data<T> = {
  code: string
  message: string
  data: T
}
// 核心是为了代码更好的提示  根据传入类型的不同提示也不同
const request = <T>(url: string, method = 'get', submitData?: object) => {
  // 泛型的第二个参数可以自定义响应数据类型
  return instance.request<T, Data<T>>({
    url,
    method,
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
    // get: submitData      post: submitData
  })
}

// 使用
// request<User>('xxx').then((res) => {
//   return res.data.
// })
// axios()   axios.request<T>() axios.get() axios.post()
export { baseURL, instance, request }
